<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ page import="org.springframework.web.context.WebApplicationContext" %>
<%@ page import="java.util.List" %>
<%@ page import="com.party.admin.biz.system.MenuBizService" %>
<%@ page import="java.util.Map" %>
<%
    ServletContext context = request.getSession().getServletContext();
    WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(context);
    MenuBizService menuService = (MenuBizService) wac.getBean("menuBizService");
    List<Map> maps = menuService.buildAdminData();
    request.setAttribute("adminMenu", maps);
%>
<div class="fix-menu-btn"><i class="iconfont icon-right"></i></div>
<!--侧边栏-->
<aside>
    <div class="aside-scroll">
    <i class="aside-bg"></i>
    <div class="aside-main">
        <c:forEach var="map" items="${adminMenu}" varStatus="status">
            <c:choose>
                <c:when test="${status.index == 0 and map.permission == 'admin:home:home'}">
                    <li class="aside-first">
                        <ul class="aside-dd">
                            <li class="aside-second">
                                <a href="${ctx}/system/main/view.do"
                                   class="aside-nav " data-title="${map.name}">
                                    <i class="menu-icon iconfont icon-home"></i>${map.name}
                                </a>
                            </li>
                        </ul>
                    </li>
                </c:when>
                <c:otherwise>
                    <li class="aside-first">
                        <div class="aside-dt"><i class="menu-icon iconfont ${map.icon}"></i><span>${map.name}</span></div>
                        <ul class="aside-dd">
                            <c:forEach var="child" items="${map.children}">
                                <li class="aside-second">
                                    <c:if test="${fn:length(child.children) > 0}">
                                        <div class="aside-dt"><i
                                                class="menu-icon iconfont ${child.icon}"></i><span>${child.name}</span><i
                                                class="iconfont icon-right"></i></div>
                                        <ul class="aside-dd" style="height: 0">
                                            <c:forEach var="thirdChild" items="${child.children}">
                                                <li class="aside-third">
                                                    <a href="${ctx}${thirdChild.href}" data-tag="${thirdChild.rule}"
                                                       class="aside-nav " data-title="${thirdChild.name}">
                                                        <i class="menu-icon iconfont ${thirdChild.icon}"></i>${thirdChild.name}
                                                    </a>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </c:if>
                                    <c:if test="${fn:length(child.children) == 0}">
                                        <a href="${ctx}${child.href}" data-tag="${child.rule}"
                                           class="aside-nav " data-title="${child.name}">
                                            <i class="menu-icon iconfont ${child.icon}"></i>${child.name}
                                        </a>
                                    </c:if>
                                </li>
                            </c:forEach>
                        </ul>
                    </li>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </div>
    </div>
</aside>
<div class="aside-place"></div>
<script type="text/javascript">
    var navItemH = 38;
    var url = window.location.href,findActive = false;
    $('.fix-menu-btn').click(function (e) {
        if(!$('.aside-shade').length){
            $('body').append('<div class="aside-shade"></div>');
            $('.aside-shade').click(function (e) {
                $('body').removeClass('aside-open');
            });
        }
        $('body').addClass('aside-open');
    });

    // 定位显示
    $('.aside-nav').each(function () {
        var item = this;
        var tags = $(this).data('tag')? $(this).data('tag').split('|') : [];
        if(findActive){
            return false;
        }
        for(var i=0; i<tags.length; i++){
            var tag = tags[i];
            if (tag && url.indexOf(tag) != -1) {
                $(item).addClass('active');
                var $second = $(item).closest('.aside-second'), secondH = 0;
                navItemH = item.clientHeight;
                if ($second.length > 0) {
                    $(item).closest('.aside-second').addClass('aside-open');
                    secondH = $second.find('>.aside-dd').children().length * navItemH;
                }
                if ($second.length > 0) {
                    $second.find('>.aside-dd').css('height', secondH);
                }
                findActive = true;
                break;
            }
        }
    });
    if($('.aside-open').length){
        $('.aside-open')[0].scrollIntoView(false);
    }
    // 二级菜单
    $('.aside-second>.aside-dt').click(function (e) {
        var $second = $(this).closest('.aside-second'), $first = $(this).closest('.aside-first');
        if ($second.hasClass('aside-open')) {
            var height = $second.find('>.aside-dd').height();
            closeSidebarMenu($second.find('>.aside-dd'), height, function () {
                $second.removeClass('aside-open');
            })
        } else {
            var secondH = $second.find('>.aside-dd').children().length * navItemH;
            $second.addClass('aside-open');
            openSidebarMenu($second.find('>.aside-dd'), secondH);
        }
    });

    function closeSidebarMenu($el, initH, cb) {
        var height = initH;
        var interval = setInterval(function () {
            height = height - 8;
            $el.css('height', height);
            if (height <= 0) {
                clearInterval(interval);
                typeof cb === 'function' && cb();
            }
        }, 10);
    }

    function openSidebarMenu($el, totalH) {
        var height = 0;
        var interval = setInterval(function () {
            height = height + 8;
            $el.css('height', height);
            if (height >= totalH) {
                clearInterval(interval);
                $el.removeAttr("style");
            }
        }, 10);
    }
</script>
